<template>
	<tm-app v-if="showPage">
		<view class="sticky t-0 zIndex-10 bg-F9F9FA">
			<view class="pa-24">
				<view class="search-box">
					<image
						class="w-64 h-64"
						src="@/static/tabbar/tab1/seatch-icon.png"
						mode=""
					></image>
					<tm-input
						style="width: 80%"
						color="white"
						v-model="searchKey"
					></tm-input>
					<view
						class="w-42 h-42 br-200 bg-D9D9D9 fd-r jc-c"
						@click="HGetList(true)"
					>
						<tm-icon
							:font-size="24"
							name="tmicon-arrow-right"
							color="white"
						></tm-icon>
					</view>
				</view>
			</view>

			<tm-tabs
				transprent
				activeFontColor="#F53A39"
				tabs-line-ani-color="#F53A39"
				@change="tabschange"
				showTabsLineAni
				:list="statusList"
				:item-width="150"
				:width="750"
				:default-name="statusName"
				v-model:active-name="statusName"
			></tm-tabs>
		</view>

		<block v-if="list.length > 0">
			<block v-for="(item, index) in list" :key="item">
				<order-card :detail="item">
					<view class="divider"></view>

					<view class="py-24 fd-r jc-fe">
						<button
							v-if="item.status == '待支付'"
							class="btn btn-red"
							@click="HRepay(item)"
						>
							继续支付
						</button>

						<button
							v-if="
								item.status == '待发货' ||
								item.status == '待收货' ||
								item.status == '待打包' ||
								item.status == '待自提' ||
								item.status == '待评价'
							"
							class="btn btn-red-plain"
							@click="HRefund(item)"
						>
							退款
						</button>
					</view>
				</order-card>
			</block>
		</block>

		<view class="no-msg" v-else>
			<tm-result :showBtn="false"></tm-result>
		</view>
	</tm-app>

	<tm-skeleton v-else></tm-skeleton>
</template>

<script setup>
import { ref } from 'vue';

import OrderCard from './component/order-card.vue';

const showPage = ref(false);

import useStatusHook from './statusHook';
const { statusList, statusName } = useStatusHook();

import orderApi from '@/api/orderApi.js';
const searchKey = ref('');
const list = ref([]);
const noMore = ref(false);
const pageSize = 10;
const HGetList = async (refresh) => {
	if (refresh) {
		noMore.value = false;
		list.value = [];
	}
	if (noMore.value) return;

	const len = list.value.length;
	const current = refresh ? 1 : Math.ceil(len / pageSize) + 1;
	const params = {
		current,
		size: pageSize,
		status: statusName.value,
		searchKey: searchKey.value
	};

	orderApi.page(params).then((res) => {
		const arr = res.data.records.map((v) => {
			return v;
		});

		list.value.push(...arr);
		noMore.value = arr.length < pageSize;
		showPage.value = true;
		uni.stopPullDownRefresh();
	});
};

import {
	onLoad,
	onShow,
	onReachBottom,
	onPullDownRefresh
} from '@dcloudio/uni-app';
onLoad((option) => {
	if (option.status) {
		statusName.value = option.status;
	} else {
		statusName.value = '全部';
	}
});
onShow(() => {
	HGetList(true);
});
onReachBottom(() => {
	HGetList(false);
});

const tabschange = (e) => {
	HGetList(true);
};

onPullDownRefresh(() => {
	HGetList(true);
});

function HRepay({ id }) {
	uni.showLoading({
		title: '重新支付'
	});

	orderApi
		.repay({ id })
		.then((res) => {
			uni.hideLoading();
			const obj = JSON.parse(res.data.prepayid);
			uni.requestPayment({
				provider: 'wxpay',
				timeStamp: obj.timeStamp,
				nonceStr: obj.nonceStr,
				package: obj.package,
				signType: obj.signType,
				paySign: obj.paySign,
				success: function (res) {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
				},

				fail: function (res) {
					console.log('HRepay-err', res);
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
				}
			});
		})
		.catch(() => {
			uni.hideLoading();
		});
}
</script>

<style lang="scss" scoped>
.search-box {
	padding-right: 14rpx;
	height: 66rpx;
	border-radius: 33rpx;
	background-color: white;
	display: flex;
	align-items: center;
}

.btn {
	height: 52rpx;
	line-height: 48rpx;
	font-size: 24rpx;
	margin: 0;
}
</style>
